{% extends "base.html" %}

{% block javascript %}
<script>
    var tabla_mapas = {{ mapasjs|safe }};
    $(document).ready(function () {
        var mapa = $("#id_mapa");

        function actualizar_vista_previa () {
            var imagen_mapa = tabla_mapas[mapa.val()];
            $("#vista-previa img").attr('src', imagen_mapa);
        }
        
        mapa.change(actualizar_vista_previa);
        
        actualizar_vista_previa();
    });
</script>

{% endblock %}

{% block addStyles %}

h3 {
    font-family: Calibri;
	color: #575757;
	font-size: 20px;
}

#vista-previa {
    width: 170px;
    font-size: 16px;
    margin-left: 268px;
}

#botones {
    text-align: right;
    margin-top: 20px;
}

label {
    display: block;
    width: 200px;
    float: left;
}

{% endblock %}

{% block body %}
<div id="principal">
<form action="." method="post">
<div id="formulario"><h3>Crear Partida</h3>

{{ form.as_p }}
<div id="vista-previa">
Vista Previa<br />
<img src="{{ STATIC_URL}}mapa.jpg" width="170" height="100" /></div>

</div>
<div id="botones">


  <input  type="button" value="Volver" onclick="window.location.href='/menu'">
  <input name="crear" type="submit"  value="Crear Partida"/>
</div>
</form>
</div>
{% endblock %}
